﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="source/ui.jqgrid.css" rel="stylesheet" />
    <link href="source/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
    <script src="source/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
    <script src="source/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="source/grid.locale-en.js"></script>
    <script src="source/jquery.jqGrid.min.js"></script>
    <script src="data.js"></script>
</head>
<body>
    <table id="gfrc1"></table>
    <div id="pgfrc1"></div>
</body>
</html>
<script>
    jQuery("#gfrc1").jqGrid({
        //url: 'server.php?q=4',
        datatype: "local",
        colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
        colModel: [
              { name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen: true },
              { name: 'name', index: 'name', width: 100, frozen: true },
              { name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right' },
              { name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right' },
              { name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right' },
              {
                  name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
                  edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' }
              },
              {
                  name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
                  edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' }
              },
              { name: 'note', index: 'note', width: 120, sortable: false }
        ],
        gridComplete: function () {
            
        },
        ondblClickRow: function (id) {
            var r = $(this).jqGrid('getRowData', id);
            r.age1 = "1111";
            var f = $(this).jqGrid('setRowData', id, r, "color:red");

        },
        rowNum: 10,
        width: 700,
        rowList: [10, 20, 30],
        pager: '#pgfrc1',
        sortname: 'invdate',
        viewrecords: true,
        sortorder: "desc",
        jsonReader: {
            repeatitems: false
        },
        shrinkToFit: false,
        caption: "Frozen Header",
        height: 'auto',
    });
    var mydata = json.rows;
    for (var i = 0; i <= mydata.length; i++) {
        jQuery("#gfrc1").jqGrid('addRowData', i + 1, mydata[i]);
    }
    jQuery("#gfrc1").jqGrid('setFrozenColumns');
</script>
